<template>
  <Drawer
    width="33%"
    title="授权"
    placement="right"
    v-model:visible="visible"
    :footer-style="{ textAlign: 'right' }"
    @close="onclose"
  >
    <template #closeIcon>
      <ArrowLeftOutlined />
    </template>

    <Form :model="formState" v-bind="formItemLayout" ref="formRef">
      <FormItem label="用户组名" name="name">
        {{ formState.name }}
      </FormItem>
      <FormItem label="策略名称" name="policyId" :rule="[{ required: true, message: '请选择权限策略' }]">
        <Select v-model:value="formState.policyId" :options="policyList" @change="policyChange"></Select>
      </FormItem>
      <template v-if="policyList[0] && formState.policyId == policyList[0].id">
        <FormItem label="应用" name="app">
          <Select v-model:value="formState.app" mode="multiple" :options="appList"></Select
        ></FormItem>
        <FormItem label="组件" name="compo">
          <Select v-model:value="formState.compo" mode="multiple" :options="compoList"></Select
        ></FormItem>
      </template>
      <template v-if="policyList[1] && formState.policyId == policyList[1].id">
        <FormItem label="应用" name="app">
          <Select v-model:value="formState.app" mode="multiple" :options="appList"></Select>
        </FormItem>
      </template>
    </Form>
    <template #footer>
      <Button style="margin-right: 8px" type="primary" @click="submit">提交</Button>
      <Button @click="onclose">取消</Button>
    </template>
  </Drawer>
</template>
<script lang="ts" setup>
import { Drawer, Form, FormItem, message, Button, Select } from 'ant-design-vue';
import { ref } from 'vue';
import { ArrowLeftOutlined } from '@ant-design/icons-vue';
import { AuthPolicyItem } from '/@/api/work-order/userManagement/userGroup/model/userGroupModel';
import { authorizeUserGroup } from '/@/api/work-order/userManagement/userGroup/userGroup';

const visible = ref(false);
interface FormState {
  groupId: number;
  policyId: number;
  app: number[];
  compo: number[];
  name: string;
}
let formState = ref({} as FormState);
const formRef = ref();
const policyList = ref<AuthPolicyItem[]>([]);
const appList = ref();
const compoList = ref();

// policyList.value=await getAuthPolicyList();

// appList.value = await getAppList();
const openAuth = async (record) => {
  policyList.value = [
    { label: 'bbbbb', value: 123, id: 123, isBuiltIn: false, description: '', name: 'bbbbb' },
    { label: 'ccccc', value: 333, id: 333, isBuiltIn: true, description: '', name: 'ccccc' },
  ];

  formState.value.name = record.name;
  formState.value.groupId = record.id;

  visible.value = true;

  appList.value = [
    { label: 'bbbbb', value: 'bbbbb' },
    { label: 'ccccc', value: 'ccccc' },
  ];
};

// compoList.value = await getCompoList(formState.app);
const policyChange = () => {
  if (policyList.value[0] && formState.value.policyId == policyList.value[0].id) {
    formState.value.app = [];
    formState.value.compo = [];

    compoList.value = [
      { label: 'bbbbb', value: 'bbbbb' },
      { label: 'ccccc', value: 'ccccc' },
    ];
  }
};
const emit = defineEmits(['submitSuccess']);
const submit = async () => {
  let authParam = {
    groupId: formState.value.groupId,
    policyId: formState.value.policyId,
    resourceIdList: formState.value.compo,
  };
  if (formState.value.policyId == policyList.value[1].id) {
    authParam.resourceIdList = formState.value.app;
  }
  formRef.value.validate().then(async () => {
    let res = await authorizeUserGroup(authParam);
    if (res) {
      message.success('授权成功');
    }
    emit('submitSuccess');
  });
};
const onclose = () => {
  visible.value = false;
  formRef.value.clearValidate();
  formState.value = {} as FormState;
};
const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 14 },
};
defineExpose({ openAuth });
</script>
